@extends('template.layout')

@section('resources')
    <script src={{asset('/js/parallax/parallax.min.js')}}></script>
    <title>Qkids - 购买课程</title>
@stop

@section('content')


    <div class="scroll-point"></div>

    <div class="payment-result">
        <div class="spinner" id="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
        </div>

        <div class="ok-big-icon icon " id="okIcon">

        </div>

        <div class="error-big-icon icon" id="errorIcon">

        </div>

        <h1 id="hint">正在验证支付结果..........</h1>

        <h1 class="verify-hint" id="successHint">支付成功,  页面将在<span>10</span>秒后关闭</h1>
        <h1 class="verify-hint" id="errorHint">支付失败,请返回重新发起支付,页面将在<span>10</span>秒后关闭</h1>
    </div>
@stop


@section('script')

    <script>
        $(document).ready(function () {

            // 验证订单， 是否已经支付
            setTimeout(function () {
                $.ajax({
                    type: 'GET',
                    async: true,
                    url: '/bills/{{$billNo}}',
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content'),
                        '_token': $('meta[name="_token"]').attr('content'),
                        'Authorization': 'Bearer ' + JSON.parse(localStorage.getItem("token")).access_token
                    },
                    success: function (data) {

                        if (typeof(data.status) !== 'undefined' && data.status === 20) {
                            $('#spinner').hide();
                            $('#okIcon').show();
                            $('#hint').hide();
                            $('#successHint').show();
                            updateInSec($('#successHint'));
                        } else {
                            $('#spinner').hide();
                            $('#errorIcon').show();
                            $('#hint').hide();
                            $('#errorHint').show();
                            updateInSec($('#errorHint'));
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {

                            $('#spinner').hide();
                            $('#errorIcon').show();
                            $('#errorHint').show();
                            $('#hint').hide();
                            updateInSec($('#errorHint'));
                            toastAlert(errorThrown, 2);

                    }
                })}, 1000
            );

            var closeCount = 5;
            function updateInSec(obj){

                if(closeCount <= 0) {
                    open(location, '_self').close();
                    return;
                }
                else {
                    closeCount--;
                    obj.find('span').text(closeCount);
                }

                if(closeCount >= 0 ){
                    setTimeout(function(){
                        updateInSec(obj)
                    },1000);
                }
            }
        })
    </script>
@stop